<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8">
	<title></title>
	<!-- flex-flow属性是flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap。 -->
	<style>
		.contain {
			width: 500px;
			height: 1000px;
			background-color: #FFF0F5;
			display: flex;
			flex-flow: column wrap-reverse;
		}
	</style>
</head>

<body>
	<div class="contain">
		<div style="background-color: #ffaa7f; width: 60px; height: 60px;">1</div>
		<div style="background-color: #ffaa7f; width: 60px; height: 60px;">2</div>
		<div style="background-color: #55aa00; width: 60px; height: 60px;">3</div>
		<div style="background-color: #aaaa00; width: 60px; height: 60px;">4</div>
		<div style="background-color: #ff00ff; width: 60px; height: 60px;">5</div>
		<div style="background-color: #0055ff; width: 60px; height: 60px;">6</div>
		<div style="background-color: #000000; width: 60px; height: 60px;">7</div>
		<div style="background-color: #ffff00; width: 60px; height: 60px;">8</div>
		<div style="background-color: #55ffff; width: 60px; height: 60px;">9</div>
		<div style="background-color: #ff5500; width: 60px; height: 60px;">10</div>
		<div style="background-color: #55557f; width: 60px; height: 60px;">11</div>
		<div style="background-color: #aaffff; width: 60px; height: 60px;">12</div>
	</div>
</body>

</html>